<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                
                <el-form-item label="">
                    <el-select clearable v-model="form.search_store_id" placeholder="全部门店">
                        <el-option v-for="(item,a) in storeList" :key="a" :label="item.title" :value="item.store_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-input v-model="form.keyword" placeholder="用户名称/手机号"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 订单号	会员	消费金额	折扣金额	消费属性	时间	消费门店 -->
                <el-table-column prop="order_id" label="订单号" fixed width="260"></el-table-column>
                <el-table-column prop="" label="会员">
                    <template slot-scope="scope">
                        <p>{{scope.row.nickname}}</p>
                        <p>{{scope.row.mobile}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="total_price" label="消费金额"></el-table-column>
                <el-table-column prop="discount_price" label="折扣金额"></el-table-column>
                <el-table-column prop="consumer_type_cn" label="消费属性"></el-table-column>                
                <el-table-column prop="create_time" label="时间"> </el-table-column>
                <el-table-column prop="title" label="消费门店"></el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

    </div>
</template>
<style lang="scss">
.el-table .cell{text-align: left}
</style>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:'1'

            },
            timerange:[],
            storeList:[],
            
            
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.storefranchisee,{},(res)=> {
            that.storeList = res.data
        })//获取门店列表-
        that.getList()
        
    },
    methods:{
        search(){
            const that = this;
            that.form.start_time = that.timerange[0];
            that.form.end_time = that.timerange[1];           
            that.getList()
        },          
        changePage(val){
            var that = this;
            console.log(that.form)
            that.pageNum = val;
            that.form.page = val;
            that.getList()
        },
        getList(){
            let that = this;
            abc.get(that,potUrl.consumerlist,that.form,(res)=>{
                that.tableData = res.data.list;
                that.total = res.data.total;
            })
        },
    }
}

</script>